{% extends "base.html" %}

{% block title %}AI聊天工具 - aigc管理器{% endblock %}

{% block heard %}aigc管理器{% endblock %}

{% block css %}
    <style>
        .page_body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f2f2f2;
        }

        .chat-box {
            width: 90%;
            height: 80%;
            border: 1px solid #e2e2e2;
            border-radius: 5px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background-color: white;
        }

        .chat-header {
            background-color: #009688;
            color: white;
            padding: 10px;
            text-align: center;
            flex-shrink: 0;
        }

        .chat-body {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            background-color: #f9f9f9;
            border-bottom: 1px solid #e2e2e2;
        }

        .chat-footer {
            padding: 10px;
            flex-shrink: 0;
        }

        .chat-message {
            margin-bottom: 10px;
            word-wrap: break-word;
        }

        .chat-message .sender {
            font-weight: bold;
        }

        .chat-message .text {
            margin-left: 10px;
        }

        .chat-message-left {
            justify-content: flex-start;
        }

        .chat-message-left .text {
            background-color: #e2f7e2;
            margin-right: auto;
        }

        .chat-message-right {
            justify-content: flex-end;
        }

        .chat-message-right .text {
            padding: 1%;
            background-color: #d9edf7;
            margin-left: auto;
        }

        .author {
            padding: 2%;
        }

        .layui-btn-fluid {
            width: 100%;
        }
    </style>
{% endblock %}

{% block content %}
<div class="page_body">
  <div class="chat-box">
        <div class="chat-header"><h3>聊天工具</h3></div>

        <!--    内容页面    -->
        <div class="chat-body" id="chat-body">
            <!-- Chat messages will appear here -->
        </div>

        <!--   操作界面   -->
        <div class="chat-footer">
            <div class="layui-row">
                <div class="layui-col-xs8 layui-col-sm10">
                    <input type="text" id="message" class="layui-input" placeholder="输入你的问题...">
                </div>
                <div class="layui-col-xs4 layui-col-sm2">
                    <button class="layui-btn layui-btn-fluid" id="send-btn">发送</button>
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block js %}
    <script src="/static/js/utils.js"></script>
{% endblock %}

{% block js_content %}
    <script>
        layui.define(function(exports){
            // 输出接口
            exports('common', {
                run_start: function () {
                    var $ = layui.jquery;
                    // 发送函数
                    function sendMessage() {
                        var message = $('#message').val();
                        if (message.trim() === '') {
                            layer.msg("请输入你的问题");
                            return;
                        }
                        // 等待接受信息
                        aigcFunction.send_message(message);
                    }

                    // 点击发送消息
                    $('#send-btn').on('click', function() {sendMessage();});

                    // 监听回车键
                    $('#message').on('keypress', function(e) {
                        if (e.which === 13) {sendMessage();}
                    });
                }
            });
        });
    </script>
{% endblock %}